<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我的博客</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/lib.js"></script>
</head>

<body class="bg-2d3a4b">
    <div class="flex align-center justify-center" style="height: 100vh;">
        <div class="w-px-400">
            <div class="text-center color-white font-24 font-family">
                <span>Welcome to my Blog!</span>
            </div>

            <div class="text-center mar-t-20">
                <div>
                    <div class="flex flex-1 bg-white bor-radius-3">
                        <div class="mar-t-5 mar-l-5">
                            <img src="./images/icon_001.png" class="w-px-16 h-auto" />
                        </div>

                        <input id="user" type="text" placeholder="请输入用户名" class="h-px-26 font-12 input-init">
                    </div>

                    <div class="flex flex-1 mar-t-10 align-center bg-white bor-radius-3">
                        <div class="mar-t-3 mar-l-5">
                            <img src="./images/icon_002.png" class="w-px-14 h-auto" />
                        </div>

                        <input id="password" type="password" placeholder="请输入密码" class="flex-1 h-px-26 font-12 input-init">

                        <div class="mar-t-3 mar-r-10 cursor-pointer" onclick="showPassword()" >
                            <img id="pwdImg" src="./images/icon_003.png" class="w-px-16 h-auto" />
                        </div>
                    </div>
                </div>

                <div class="flex color-white mar-t-20">
                    <div class="flex flex-2 bg-50a5ff align-center justify-center h-px-26 font-12 bor-radius-3 mar-r-15 cursor-pointer" onclick="login()">
                        <span>登 录</span>
                    </div>

                    <div class="flex flex-1 bg-e6a23d align-center justify-center h-px-26 font-12 bor-radius-3 mar-l-15 cursor-pointer" id="register">
                        <span>去注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var eyeState = false
        var username = '许金秀'
        var pwd = 'xujinxiu'

        window.onload = function() {
            checkLogin2()
        }

        // 登录
        function login() {
            var user = document.getElementById("user")
            var password = document.getElementById("password")

            if(!user.value){
                alert("请输入用户名")
                return
            }

            if(!password.value){
                alert("请输入密码")
                return
            }

            if(user.value !== '许金秀' || password.value !== 'xujinxiu'){
                alert("账号或密码错误！")
                return
            }

            let userInfo = {
                username: username, // 账号
                isLogin: true, // 是否登录
                avatarUrl: './images/photo_001.jpg', // 头像图片地址
                nickName: 'xujinxiu',
                a: 2,
                b: 10,
                c: 0,
                d: 12,
                e: 5
            }

            setTimeout(() => {
                localStorage.setItem('userInfo', JSON.stringify(userInfo))
                window.location.href = `./index.html`
            }, 1000)
        }

        // 切换密码状态
        function showPassword() {
            var password = document.getElementById("password")
            var pwdImg = document.getElementById("pwdImg")

            if (!eyeState) {
                password.type = 'text' 
                pwdImg.src = './images/icon_004.png'
            } else {
                password.type = 'password'
                pwdImg.src = './images/icon_003.png'
            }
            eyeState = !eyeState
        }

        // 通过修改window.location.href跳转
        document.getElementById('register').addEventListener('click', function() {
            window.location.href = './register.html'; // 指定跳转的页面URL
        });
    </script>
</body>
</html>